import React from 'react';
import { Form, Input, Select, Button, DatePicker } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

export default function CustomerCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleFinish = (values) => {
    // 处理日期格式
    const createTime = values.createTime ? values.createTime.format('YYYY-MM-DD') : '';
    const lastFollowTime = values.lastFollowTime ? values.lastFollowTime.format('YYYY-MM-DD') : '';
    // 组装新客户数据
    const newCustomer = {
      key: Date.now(),
      name: values.name,
      intentionLevel: values.intentionLevel,
      customerLevel: values.level,
      followStatus: values.status,
      follower: values.follower,
      createTime,
      lastFollowTime
    };
    navigate('/business/customer', { state: { newCustomer } });
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, borderBottom: '2px solid #eee', paddingBottom: 12 }}>
          <div style={{ width: 10, height: 24, background: '#4880ff', borderRadius: 2, marginRight: 12 }} />
          <span style={{ fontWeight: 700, fontSize: 22 }}>客户信息新增</span>
          <CloseOutlined style={{ position: 'absolute', right: 24, top: 32, fontSize: 28, cursor: 'pointer' }} onClick={() => navigate(-1)} />
        </div>
        <Form
          form={form}
          layout="vertical"
          style={{ maxWidth: 600, margin: '0 auto', marginBottom: 40 }}
          onFinish={handleFinish}
        >
          <Form.Item label={<span style={{ color: 'red' }}>* 客户名称：</span>} name="name" rules={[{ required: true, message: '请输入客户名称' }]}> 
            <Input placeholder="请输入客户名称" /> 
          </Form.Item>
          <Form.Item label={<span style={{ color: 'red' }}>* 意向等级：</span>} name="intentionLevel" rules={[{ required: true, message: '请选择意向等级' }]}> 
            <Select placeholder="请选择">
              <Option value="高">高</Option>
              <Option value="中">中</Option>
              <Option value="低">低</Option>
            </Select> 
          </Form.Item>
          <Form.Item label={<span style={{ color: 'red' }}>* 客户等级：</span>} name="level" rules={[{ required: true, message: '请选择客户等级' }]}> 
            <Select placeholder="请选择">
              <Option value="一级">一级</Option>
              <Option value="二级">二级</Option>
              <Option value="三级">三级</Option>
            </Select> 
          </Form.Item>
          <Form.Item label={<span style={{ color: 'red' }}>* 跟进状态：</span>} name="status" rules={[{ required: true, message: '请选择跟进状态' }]}> 
            <Select placeholder="请选择">
              <Option value="初步接洽">初步接洽</Option>
              <Option value="意向强烈">意向强烈</Option>
              <Option value="已成交">已成交</Option>
            </Select> 
          </Form.Item>
          <Form.Item label={<span style={{ color: 'red' }}>* 跟进人：</span>} name="follower" rules={[{ required: true, message: '请输入跟进人' }]}> 
            <Input placeholder="请输入跟进人" /> 
          </Form.Item>
          <Form.Item label={<span style={{ color: 'red' }}>* 新增时间：</span>} name="createTime" rules={[{ required: true, message: '请选择新增时间' }]}> 
            <DatePicker style={{ width: '100%' }} placeholder="请选择新增时间" /> 
          </Form.Item>
          <Form.Item label={<span style={{ color: 'red' }}>* 最近跟进时间：</span>} name="lastFollowTime" rules={[{ required: true, message: '请选择最近跟进时间' }]}> 
            <DatePicker style={{ width: '100%' }} placeholder="请选择最近跟进时间" /> 
          </Form.Item>
          {/* 按钮放到Form.Item内部，保证submit生效 */}
          <Form.Item style={{ textAlign: 'center', marginTop: 40 }}>
            <Button type="primary" style={{ width: 120, marginRight: 32 }} htmlType="submit">保存</Button>
            <Button style={{ width: 120 }} onClick={() => navigate(-1)}>取消</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
} 